<template>
    <div :class="`review-goods-item ${mode} ${isDisable ? 'is-diable' : ''}`">
        <div class="goods-pic">
            <img class="pic-value" :src="imageSrc" alt="">
            <div class="diable-tip" v-if="isDisable">
                <div>超出配</div>
                <div>送范围</div>
            </div>
        </div>
        <div class="good-detail">
            <div class="goods-name title-color">{{itemInfo.prod_name}}</div>
            <div class="goods-sku">{{itemInfo.sku_name}}</div>
        </div>
        <div class="goods-name-and-control">
            <div class="goods-price title-color"><span class="label">￥</span>{{itemInfo.price / 100}}</div>
            <div class="goods-count">x{{itemInfo.quantity}}</div>
        </div>
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import { createShopImageSrc } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    naem: 'ReviewGoods', // 确认订单项
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        itemInfo: {
            type: Object,
            default() {
                return {};
            },
        },
        // 是否是失效状态
        isDisable: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        imageSrc() {
            return createShopImageSrc(this.$props.itemInfo.pic);
        },
    },
};
</script>

<style lang="less" scoped>
.review-goods-item {
    .flex();
    justify-content: space-between;
    .p-v(@gap);
    .goods-pic {
        width: 70px;
        height: 70px;
        border-radius: @border-radius;
        border: 1px solid rgba(125, 125, 131, 0.2);
        position: relative;
        overflow: hidden;
        .pic-value {
            border-radius: @border-radius;
            width: 100%;
            height: 100%;
        }
        .diable-tip {
            border-radius: @border-radius;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: @white;
            opacity: .88;
            font-size: @shop-font-size-sm;
            line-height: 15px;
            .flex-column-center();
        }
    }
    .good-detail {
        flex: 1;
        .m-l(@shop-gap);
        .goods-name {
            font-size: @font-size;
            color: @text-color;
        }
        .goods-sku {
            font-size: @shop-font-size-sm;
            color: @tip-color;
            .m-t(@gap-sm);
            opacity: .7;
        }
    }
    .goods-name-and-control {
        .flex-column();
        align-items: flex-end;
        .goods-price {
            font-size: @font-size-md;
            font-weight: 500;
            font-family: @font-family-number;
            .label {
                .m-r(-3);
            }
        }
        .goods-count {
            .m-t(@gap-sm);
            font-size: @shop-font-size-sm;
            color: @tip-color;
        }
        .goods-control {
            .m-t(@gap);
            width: 73px;
            height: 27px;
            background: rgba(125, 125, 131, 0.08);
            border-radius: 14px;
            font-size: @shop-font-size-sm;
            color: @tip-color;
            .flex-row-center();
            &:active {
                background: rgba(125, 125, 131, 0.38);
            }
        }
    }
    &.is-diable {
        .goods-name,
        .goods-price {
            opacity: .5;
        }
    }
}
</style>
